<template>
  <div>
    <el-row>
      <el-button @click="publish" type="primary" style="float: right;">发布新职位</el-button>
    </el-row>
    <template v-for="jobinfo in jobs">
      <div class="job">
        <el-row type="flex" justify="space-between">
          <el-col style="text-align: left">{{jobinfo.name}}</el-col>
          <el-col style="text-align: right">
            <el-avatar :src="jobinfo.logo" size="medium"></el-avatar>
            {{jobinfo.companyName}}
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col style="display: inline-block">
            <p style="font-size: 16px;
    color: #ff5959;
    margin-right: 10px;
    float: left;">{{jobinfo.salary}}</p>
            <ul>
              <li>{{jobinfo.location}}</li>
              <li>{{jobinfo.experience}}</li>
              <li>{{jobinfo.degree}}</li>
            </ul>
          </el-col>
          <el-col>
            <p style="float: right;font-size: 12px">{{jobinfo.scale}}</p>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col style="width:auto">
            <el-tag  size="mini" v-for="i in jobinfo.tags" :key="i.id" v-if="!(i.id&&i.tagsId==null)">{{i.tag}}</el-tag>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="update(jobinfo)">修改信息</el-button>
          </el-col>
        </el-row>
      </div>
    </template>
    <el-dialog :visible.sync="formvisible">
      <jobform :form="jobform"/>
      <span slot="footer">
        <el-button type="primary" @click="submitJob()" >立即修改</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="formvisible2">
      <jobform :form="jobform"/>
      <span slot="footer">
        <el-button type="primary" @click="submitJob2()" >发布职位</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import Jobform from "@/components/jobform";
import {requests} from "@/utils/request";

export default {
  name: "publish",
  components: {Jobform},
  data(){
    return{
      jobs:[],
      jobform:{},
      formvisible:false,
      formvisible2:false,
    }
  },
  mounted() {
    this.getjobs()
  },
  methods:{
    update(job){
      this.jobform=job
      this.formvisible=true
    },
    submitJob(){
      requests.post("job/updateJob",this.jobform)
      this.formvisible=false
    }
    ,submitJob2(){
      requests.post("job/publishjob",this.jobform)
      this.formvisible2=false
      this.jobs.push({...this.jobform})
    }
    ,
    getjobs(){
      requests.get('job/publish').then(res=>{
        this.jobs=res.data.data
      })
    },
    publish(){
      this.jobform={
        tags:[]
      }
      this.formvisible2=true
    }
  }
}
</script>

<style scoped>
.job{
  background-color: white;
  padding: 10px;
  margin-bottom: 4px;
}
ul{
  float: left;
  list-style: none;
  padding: 0 0 0 10px;
}
li{
  float: left;
  border-right: 1px solid #eee;
  font-size: 12px;
  color: #666;
  padding: 0 8px;
}
</style>